<template>
  <svg xmlns="http://www.w3.org/2000/svg" :width="_width" :height="_height" viewBox="0 0 1024 1024"
    preserveAspectRatio="xMidYMid meet" fill="" role="presentation" ref="host">
    <g>
      <path data-follow-fill="#0389FF" :fill="_fill"
        d="M917.333 186.667a5.333 5.333 0 0 0-5.333-5.334H112a5.333 5.333 0 0 0-5.333 5.334v64A5.333 5.333 0 0 0 112 256h800a5.333 5.333 0 0 0 5.333-5.333zM106.667 773.333v64a5.333 5.333 0 0 0 5.333 5.334h394.667a5.333 5.333 0 0 0 5.333-5.334v-64a5.333 5.333 0 0 0-5.333-5.333H112a5.333 5.333 0 0 0-5.333 5.333zM512 474.667H112a5.333 5.333 0 0 0-5.333 5.333v64a5.333 5.333 0 0 0 5.333 5.333h800a5.333 5.333 0 0 0 5.333-5.333v-64a5.333 5.333 0 0 0-5.333-5.333z" />
    </g>
  </svg>
</template>

<script setup lang="ts">
import { computed, onMounted, onUpdated, useTemplateRef } from 'vue'
const props = defineProps({
  color: {
    type: String,
    required: false
  },
  fill: {
    type: String,
    required: false
  },
  stroke: {
    type: String,
    required: false
  },
  width: {
    type: [String, Number],
    required: false
  },
  height: {
    type: [String, Number],
    required: false
  },
  size: {
    type: [String, Number],
    required: false,
    default: "1em"
  },
})


const _fill = computed(() => {
  return props.fill || props.color
})

const _stroke = computed(() => {
  return props.stroke || props.color
})

const _width = computed(() => {
  return props.width || props.size
})

const _height = computed(() => {
  return props.height || props.size
})


const host = useTemplateRef('host');

onMounted(() => {
  if (!_fill) {
    host.value?.querySelectorAll('[data-follow-fill]').forEach(item => {
      item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
    })
  }
  if (!_stroke) {
    host.value?.querySelectorAll('[data-follow-stroke]').forEach(item => {
      item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
    })
  }
})
onUpdated(() => {
  if (!_fill) {
    host.value?.querySelectorAll('[data-follow-fill]').forEach(item => {
      item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
    })
  }
  if (!_stroke) {
    host.value?.querySelectorAll('[data-follow-stroke]').forEach(item => {
      item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
    })
  }
})

</script>

<style scoped>
svg[spin="true"] {
  animation: iconpark-spin 1s infinite linear;
}

svg[spin="true"][rtl="true"] {
  animation: iconpark-spin-rtl 1s infinite linear;
}

svg[rtl="true"] {
  transform: scaleX(-1);
}

@keyframes iconpark-spin {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes iconpark-spin-rtl {
  0% {
    -webkit-transform: scaleX(-1) rotate(0);
    transform: scaleX(-1) rotate(0);
  }

  100% {
    -webkit-transform: scaleX(-1) rotate(360deg);
    transform: scaleX(-1) rotate(360deg);
  }
}
</style>